<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-header class="logobox">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <div class="logo" ref="logo"></div> <h3>后台管理系统</h3>
                        </el-col>
                        <el-col :span="16">
                           
                        </el-col>
                        <el-col :span="4">
                            <div class="quan"> <el-icon size="10" color="grey"><FullScreen /></el-icon></div>
                            <div class="quan"> <el-icon size="10" color="grey"><FullScreen /></el-icon></div>
                            <div class="quan"> <el-icon size="10" color="grey"><FullScreen /></el-icon></div>
                           
                            <el-button type="primary" :icon="Switch" @click="aotulogin()">退出</el-button>
                        </el-col>
                    </el-row>
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <Menu  :routerList="routerList"></Menu>
                    </el-aside>
                    <el-container>
                        <!-- main路由出口 -->
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-show="item.meta.title" v-for="(item, index) in $route.matched" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
                        </el-breadcrumb>
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                        <el-footer>Footer</el-footer>
                    </el-container>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Switch, } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router'
import Menu from '@/components/Menu.vue';
import { onMounted, ref } from 'vue';
const router = useRouter()
console.log(router.getRoutes());
const routerList = router.getRoutes().filter(v => v.meta.isShow)
console.log(!!routerList[0].children);
let logo = ref()
onMounted(()=>{
    console.log(logo.value);

})

const aotulogin = () => {
    router.push('/login')

}
let $route = useRoute()
console.log($route.matched);

</script>

<style scoped>
.logo {
    width: 30px;
    height: 30px;
    background: url(https://img.alicdn.com/imgextra/i2/O1CN01FF1t1g1Q3PDWpSm4b_!!6000000001920-55-tps-508-135.svg) no-repeat;
    background-size: 100px;
   
}

.el-header {
    border-bottom: 1px solid rgb(201, 201, 201);
}

.el-col {
    /* display: flex;
    justify-self: center;
    align-items: center; */
}

.logobox .el-col {
    display: flex;
    justify-self: center;
    align-items: center;
    height: 60px;
}

h3 {
    flex: 1;
    text-align: center;
    color: grey;
}

.el-aside {
    height: calc(100vh - 80px);
}

.el-col-12 {}
.quan{
    width: 20px;
    height: 20px;display: flex;
    justify-content: center;
    align-items: center;
    border: grey 1px solid;
    border-radius: 50%;
    margin-right: 10px;

}
</style>